<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商家联盟</title>
    <script src="js/rem.js"></script>
    <link rel="stylesheet" href="./css/css-comment.css">
    <link rel="stylesheet" href="./css/coupon.css">
    <link rel="stylesheet" href="./css/weui.css">
    <link rel="stylesheet" href="./css/jquery-weui.css">
    <script src="js/vue2.5.16.js"></script>
    <style>
        .weui-toast {
            margin-left: 0;
        }
    </style>
</head>
<body>
<div id="coupon">
    <header class="coupon-header">
        <span :class="[headerIndex==0?'headerActive':'']" class="header-group" @click="headerItem(0)">团购</span>
        <span :class="[headerIndex==1?'headerActive':'']" class="header-Voucher" @click="headerItem(1)">优惠券</span>
    </header>
    <div class="com">
        <div v-if="headerIndex==0" class="team-buying">
            <ul>
                <li class="clearfix teamBuying" v-for="item in teamBuying">
                    <div class="shopImg">
                        <img :src="item.img" :alt="item.shopName">
                    </div>
                    <div class="shop-com">
                        <div>
                            <p class="shopName">{{item.shopName}}</p>
                            <span class="shopTime">购买时间:{{item.shopTime}}</span>
                        </div>
                        <span class="price">￥{{item.price}}</span>
                    </div>
                    <div class="shop-code">
                        <button class="code-button">立即核销</button>
                        <p class="code">核销码{{item.code}}</p>
                    </div>
                </li>
            </ul>
        </div>
        <div v-if="headerIndex==1" class="coupon-list">
            <ul class="coupon-ul clearfix">
                <li class="coupon-li" v-for="(item,index) in coupon" @click="receive(index)">
                    <div class="coupon-bg">
                        <div class="coupon-com">
                            <div class="com-left">
                                <div class="coupon-mj">
                                    <p class="Voucher">
                                        <small>￥</small>
                                        <span class="rmb">{{item.rmb}}</span>
                                    </p>
                                    <div style="padding-left: .05rem">
                                        <p>优惠券</p>
                                        <p class="mj">满{{item.mj}}使用</p>
                                    </div>
                                </div>
                                <p class="use">({{item.storeUse}})</p>
                            </div>
                            <div class="receive">
                                <button class="cou-btn">立即使用</button>
                            </div>
                        </div>
                    </div>
                    <p style="margin-top:.05rem;font-size: .12rem;">有限期{{item.startTime}}至{{item.endTime}}</p>
                </li>
            </ul>
        </div>
    </div>
    <zh-tabbar is-tab="2"></zh-tabbar>
</div>
</body>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery-weui.min.js"></script>
<script src="js/tabbar.js"></script>
<script>
    new Vue({
        el: "#coupon",
        data: {
            headerIndex: 0,
            teamBuying: [
                {img: './images/img3.png', shopName: "榛果拿铁", shopTime: "2018.8.23", price: "25", code: "2018823"},
                {img: './images/img.png', shopName: "榛果拿铁", shopTime: "2018.8.23", price: "25", code: "2018823"}
            ],
            coupon: [
                {
                    rmb: 100,
                    mj: 199,
                    storeUse: "此劵限龙湖甜品店使用",
                    startTime: '2018.8.23',
                    endTime: "2018.9.23"
                },
                {
                    rmb: 1000,
                    mj: 1999,
                    storeUse: "此劵限龙湖甜品店使用",
                    startTime: '2018.8.23',
                    endTime: "2018.9.23"
                },
                {
                    rmb: 1000,
                    mj: 1999,
                    storeUse: "此劵限龙湖甜品店使用",
                    startTime: '2018.8.23',
                    endTime: "2018.9.23"
                },
            ],
            url:''
        },
        created:function () {
            this.url = window.location.href.split('=')[1];
            if(this.url==undefined || this.url == ''){
                this.headerIndex = 0;
                console.log(this.headerIndex)
            }else {
                this.headerIndex = url
                console.log(this.headerIndex)
            }
        },
        methods: {
            headerItem: function (data) {
                this.headerIndex = data
            },
            receive: function (index) {
                var that = this;
                $.confirm({
                    title: "",
                    text: '确认使用该优惠劵吗?',
                    onOK: function () {
                        that.coupon.splice(index, 1);
                        if(that.url==1){
                            window.location.href = 'pay.html'
                        }else {
                            window.location.href = 'details.html'
                        }

                    }
                })
            }
        }
    })
</script>
</html>